




       
        
        .projects {
            background: #f3f3f3;
            border: 25px solid #fff;
            border-bottom-width: 60px;
            height: 100vh;
            transition: all ease .7s;
            transform: scale(1) !important;
            opacity: 1;
            z-index: 2;
        }
        .projects .contn{
            top: 50%;
            transform: translateY(-50%);
            margin-top: -60px;
            position: absolute;
            width: 100%;
            left: 0px;
            height: initial;
        }
        .projects .contn .btn{
            width: 75px;
            line-height: 150px;
            position: absolute !important;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            background: #fff;
            text-align: center;
            top: calc(50% - 35px / 2 + 35px + 60px);
        }
        .projects .contn .btn.prev{
            left: 125px;
        }
        .projects .contn .btn:before{
            content: '';
            position: absolute;
            width: 0%;
            height: 100%;
            background: #897053;
            transition: .3s ease all;
            top: 0px;
            z-index: -1;
        }
        .projects .contn .btn:hover:before{
            width: 100%;
        }
        .projects .contn .btn.prev::before{
            left: 0px;
        }
        .projects .contn .btn.next::before{
            right: 0px;
        }
        .projects .contn .btn span{
            width: 18px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            font-size: 18px;
            line-height: 140%;
            color: #1d1e2c;
            transition: all ease .3s;
            word-break: break-all;
        }
        .projects .contn .btn:hover span{
            color: #fff;
        }
        .projects .contn .btn.next{
            right: 125px;
        }
        .projects .contn>*{
            position: initial;
        }
        .projects .contn nav{
            opacity: 0;
            transform: translateY(50px);
            margin-top: 40px;
            margin-bottom: 10px;
        }
        .projects.active .contn nav{
            opacity: 1;
            transform: translateY(0px);
            transition: all ease .5s .7s;
        }
        .projects .contn nav .ttl{
            width: 20%;
        }
        .projects .contn nav .ttl p{
            margin-left: 50px;
            font-size: 24px;
            font-weight: 700;
            color: #1d1e2c;
            margin-top: 17px;
            margin-bottom: 25px;
        }
        .projects .contn nav .choose{
            width: 80%;
        }
        .projects .contn nav .choose ul{
            width: 100%;
            max-width: 1200px;
        }
        .projects .contn nav .choose ul li{
            width: 220px;
            display: inline-block;
            vertical-align: top;
        }
        .projects .contn nav .choose ul li p{
            padding: 8px 0px;
            padding-left: 45px;
            font-size: 14px;
            line-height: 1;
            color: #8d8ea0;
            transition: all ease .3s;
            position: relative;
            cursor: pointer;
        }
        .projects .contn nav .choose ul li p:hover,
        .projects .contn nav .choose ul li.active p{
            color: #1d1e2c;
        }
        .projects .contn nav .choose ul li.active p{
            padding-left: 72px;
        }
        .projects .contn nav .choose ul li p::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all .3s ease;
            width: 25px;
            height: 2px;
            background: #8d8ea0;
        }
        .projects .contn nav .choose ul li p:hover::before,
        .projects .contn nav .choose ul li.active p::before{
            background: #1d1e2c;
        }
        .projects .contn nav .choose ul li.active p::before{
            width: 55px;
        }
        .projects .contn .swiper{
            margin: 0px -25px;
            opacity: 0;
        }
        .scale{
            position: fixed;
            z-index: 60;
            width: calc(50% - 25px);
            pointer-events: none;
            height: 450px;
            opacity: 0;
            left: 0px;
            right: 0px;
            margin: auto;
            padding: 0px 25px;
        }
        .scale.move{
            pointer-events: all;
            padding: 0px;
            opacity: 1;
            transition-property: padding,width,height,top,opacity;
            transition-duration: .7s,.7s,.7s,.7s,.3s;
            transition-delay: .3s,.3s,.3s,.3s,0s;
            transition-timing-function: ease;
            top: 0px !important;
            height: 100vh;
            width: 100%;
        }
        .scale span{
            display: block;
            position: relative;
            background: #1d1e2c;
            clip-path: polygon(3% 3%, 97% 3%,97% 97%,3% 97%);
            transition: .7s .3s clip-path;
        }
        .scale img{
            opacity: .6;
        }
        .scale.move span{
            clip-path: polygon(0% 0%, 100% 0%,100% 100%,0% 100%);
        }
        .projects .contn .swiper.disappear{
            transition-delay: 0s !important;
            opacity: 0 !important;
        }
        .projects.active .contn .swiper{
            opacity: 1;
            transition: all .5s .5s ease;
        }
        .projects .contn .swiper .swiper-slide.hidden{
            display: none;
        }
        .projects .contn .swiper .swiper-slide{
            width: calc(50% - 25px);
            padding: 0px 25px;
            height: 450px;
        }
        .projects .contn .swiper .swiper-slide .box{
            position: relative;
            height: 100%;
        }
        .projects .contn .swiper .swiper-slide .box .name{
            position: absolute;
            font-size: 44px;
            line-height: 54px;
            color: #fff;
            bottom: 50px;
            left: 50px;
            letter-spacing: 10px;
            font-weight: 700;
            z-index: 3;
        }
        .projects .contn .swiper .swiper-slide .box .name::before{
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #fff;
        }
        .projects .contn .swiper .swiper-slide .box .pic,
        .projects .contn .swiper .swiper-slide .box .pic img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transition: all ease .5s;
        }
        .projects .contn .swiper .swiper-slide .box .pic{
            overflow: hidden;
            cursor: pointer;
            clip-path: polygon(0% 0%, 100% 0%,100% 100%,0% 100%);
        }
        .projects .contn .swiper .swiper-slide .box .pic::before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: #1d1e2c;
            opacity: .4;
        }
        .projects .contn .swiper .swiper-slide .box:hover .pic{
            clip-path: polygon(3% 3%, 97% 3%,97% 97%,3% 97%);
        }


        @media(max-width:1600px){
            .projects .contn .swiper .swiper-slide{
                height: 350px;
            }
            .projects .contn .btn.prev{
                left: 90px;
            }
            .projects .contn .btn.next{
                right: 90px;
            }
            .projects .contn .btn{
                line-height: 115px;
                width: 58px;
            }
            .projects .contn .btn span{
                font-size: 16px;
                width: 16px;
            }
            .projects .contn .btn.prev{
                left: 90px;
            }
            .projects .contn .btn.next{
                right: 90px;
            }

            .scale{
                height: 350px;
            }
        }

        @media(max-width:1365px){
            .process.active .contn .pic .details{
                right: -75px;
            }

            .projects .contn .swiper .swiper-slide{
                height: 250px;
            }
            .projects .contn .swiper .swiper-slide .box .name{
                font-size: 36px;
                line-height: 40px;
                bottom: 30px;
            }

            .scale{
                height: 250px;
            }
        }

        @media(max-width:1024px){
            .projects .contn{
                position: relative;
                left: initial !important;
                top: initial !important;
                bottom: initial !important;
                transform: initial;
                margin-top: 0px;
                max-width: 100%;
                padding-top: 150px;
            }   
            .projects .contn nav .ttl p{
                margin-top: 20px;
                margin-bottom: 30px;
                margin-left: 0px;
            }
            .projects .contn .swiper{
                margin: 0px -35px;
            }
            
            .projects .contn .swiper .swiper-slide{
                width: 72%;
                padding: 0px 12px;
                height: 450px;
            }
            .projects .contn .swiper .swiper-slide .box .name{
                font-size: 55px;
                line-height: 65px;
                bottom: 40px;
            }
            .projects .contn .btn{
                display: none;
            }

            .scale{
                width: 72%;
                height: 450px;
                padding: 0px 12px;
            }
        }

        @media(max-width:767px){
            .projects .contn{
                padding-top: 0px;
                padding-bottom: 100px;
            }
            .projects .contn nav{
                flex-direction: column;
                align-items: initial;
            }
            .projects .contn nav .ttl p{
                margin-top: 10px;
                margin-bottom: 15px;
            }
            .projects .contn nav .choose ul li{
                width: 210px;
            }
            .projects .contn .swiper{
                margin: 0px -25px;
            }
            .projects .contn .swiper .swiper-slide{
                width: calc(90% - 50px * .9);
                height: 250px;
            }
            .projects .contn .swiper .swiper-slide .box .name{
                font-size: 20px;
                line-height: 30px;
                bottom: 30px;
                left: 30px;
            }
            
            .scale{
                width: calc(90% - 50px * .9);
                height: 250px;
            }
        }